<template>
  <div id="unitDetail">
    <img class="thumb" :src="detail.coverImg">
    <h3 class="unit-title">{{ detail.title }}</h3>
    <div class="tool">
      <i v-show="!isPlay" class="iconfont icon-bofang" @click="playAudio"/>
      <i v-show="isPlay" class="iconfont icon-zanting" @click="pauseAudio"/>
    </div>
    <div id="navBox" class="navBox pd14" ref="nav">
        <ul class="navList">
          <li class="navItem" :class="{active:nowTab==1}">
            <span @click="nowTab=1">简介</span>
          </li>
          <li class="navItem" :class="{active:nowTab==2}">
            <span @click="nowTab=2">评论</span>
          </li>
        </ul>
      </div>
    <div class="tabPage">
      <ul class="pageList pd14">
        <li class="pageList" v-show="nowTab==1">
          <div class="comTitle">简介</div>
          <div class="concise">
            <div>{{ detail.intro }}</div>
            <div v-html="detail.content"></div>
          </div>
        </li>
        <li class="pageList" v-show="nowTab==2">
          <div class="comTitle">用户评论</div>
          <Comment :commentList="commentList" :lastPage="lastPage" :form="form" @more="onMore"></Comment>
        </li>
      </ul>
    </div>
    <div v-if="isBuy" class="footBox">
      <div class="subscribe" @click="showComment = !showComment">
        添加评论
      </div>
    </div>
    <div v-if="showComment" class="comment-modal" @click="showComment = false">
      <div class="comment-main" @click.stop>
        <textarea v-model="commentText"></textarea>
        <span class="submitComment" @click="submitComment">提交评论</span>
      </div>
    </div>
    <audio ref="audio" id="audio" loop="loop"></audio>
  </div>
</template>

<script>
import { getUnitDetail, getResource, getComment } from "@/api/unit"
import { addComment } from "@/api/project"
import { getIsBuy } from '@/api/order'
import Comment from "@/components/comment";
export default {
  components:{
    Comment
  },
  data () {
    return {
      id: this.$route.query.id,
      detail: {},
      isPlay: false,
      commentList: [],
      nowTab: 1,
      form: {
        page: 1,
        limit: 10,
      },
      isBuy: false,
      showComment: false,
      commentText: '',
    }
  },
  computed: {
    lastPage() {
      return this.commentList.length < this.form.page * this.form.limit
    }
  },
  created(){
    this.getDetail()
    this.getCommentList()
  },
  methods: {
    getDetail() {
      getUnitDetail(this.id).then(res => {
        this.detail = res.unit
        this.getIsBuy()
        this.getResource(res.unit.id)
      })
    },
    getResource(id) {
      getResource(id).then(res=> {
        if (!res.resourceUrl) {
          alert(res.msg || '资源不存在')
          return
        }
        this.$refs.audio.src = res.resourceUrl
      })
    },
    playAudio() {
      this.$refs.audio.play()
      this.isPlay = true
    },
    pauseAudio() {
      this.$refs.audio.pause()
      this.isPlay = false
    },
    getCommentList() {
      getComment(this.id, this.form).then(res=> {
        this.commentList = this.commentList.concat(res.page.list || [])
      })
    },
    onMore() {
      this.form.page++
      this.getCommentList()
    },
    getIsBuy() {
      const { projectId } = this.detail
      getIsBuy(projectId).then(res => {
        this.isBuy = res.isBuyProject
      })
    },
    submitComment() {
      if (!this.commentText || !this.id || !this.detail.projectId) {
        return
      }
      const data = {
        context: this.commentText,
        unitId: this.id,
        projectId: this.detail.projectId
      }
      addComment(data).then(res => {
        alert('评论成功')
        this.showComment = false
        this.getCommentList
      })
    }
  },
}
</script>

<style scoped lang="less">
  .thumb{
    display: block;
    width: 100vw;
  }
  .unit-title{
    margin-top: .2rem;
    width: 100%;
    max-height: 0.48rem;
    line-height: 0.24rem;
    font-size: 0.18rem;
    font-weight: bold;
    color: #000;
    display: -webkit-box;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #audio{
    display: none;
  }
  .tool{
    text-align: center;
    i{
      font-size: 40px;
      color: brown;
    }
  }
  .comTitle{
    font-size:0.18rem;
    font-weight: bold;
    margin:20px 0;
  }
  .navBox{
    width:100%;
    border-bottom:1px solid #dedede;
    &.navFixed{
      position:fixed;
      top:0;
      left:0;
      background:#f9f9f9;
      z-index: 100;
    }
    .navList{
      width:100%;
      display: flex;
      .navItem{
        flex:1;
        text-align: center;
        span{
          line-height: 60px;
          font-size:18px;
          font-weight: bold;
        }
        &.active{
          span{
            position:relative;
            display: inline-block;
            height:100%;
            color:#31c27c;
            &:after{
              position:absolute;
              left:0;
              bottom:-1px;
              content:"";
              width:100%;
              height:2px;
              background:#31c27c;
            }
          }
        }
      }
    }
  }
  .footBox{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:0.56rem;
    display:flex;
    background:#fff;
    .subscribe{
      flex:1;
      background:red;
      color:#fff;
      font-size:0.16rem;
      text-align: center;
      line-height: 0.56rem;
    }
  }
  .comment-modal{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
  }
  .comment-main{
    position: absolute;
    width: 80%;
    height: 2.4rem;
    border-radius: 10px;
    background: #fff;
    font-size: .14rem;
    color: #666;
    left: 10%;
    top: 50%;
    margin-top: -2rem;
    padding: .12rem;
    box-sizing: border-box;
    textarea{
      background: #efefef;
      color: #333;
      height: 1.5rem;
      width: 100%;
      border: 0;
      padding: .05rem .1rem;
      box-sizing: border-box;
    }
    .submitComment{
      display: block;
      width: 100%;
      height: .5rem;
      background: #efefef;
      border-radius: 10px;
      text-align: center;
      line-height: .5rem;
      max-resolution: .2rem;
    }
  }
</style>
